<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V3</title>
    <style>
        #abc{
            background-color: red;;
        }
        .abcd{
            width: 100px;
            height: 100px ;
        }
    </style>
  </head>
  <body>
    <div id="app">

        <div v-bind:[an]="av">12341</div>

        <button type="button" v-on:click="doSomething">按钮</button>

        <p v-if="seen">我爱北京天安门！</p>
        {{ aa()  }}

        <div :id="`list-${id}`">
            666
        </div>

        {{ message.split('').reverse().join('') }} 
        {{ disabled ? "1" : "0"  }}
        {{  number +  1  }}

        <div v-bind="objbind">
            5678
        </div>

        <button type="button"  :disabled="disabled">按钮</button>
        <input :readonly value="1234" />

        <div id="" :title="xyz"  >
            1231234
        </div>

        <!-- {{  插值表达式  }}   -->
         {{ message  }}
         <h1>{{ message }}</h1>
         {{ html }} 
         <span v-html="html"> </span>
    </div>
   
  </body>
</html>
<!--  引入 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    // function aa(){
    //     console.log("aaa");
    //     return "bbb";
    // }

    //  import  
  const { createApp } = Vue;
  createApp({
    // 对外绑定数据
    data() {
      return {
        an:'title',
        av:"div2",
        seen:true,
        id:888,
        number : 1,
        objbind:{
            id:"abc",
            class:"abcd"
        },

        readonly:false,
        disabled :false, 
        xyz:"Hello,123",
        message: "Hello Vue!",
        html :`<h1>  message  </h1>`
      };
    },
    methods: {
        aa(){
            console.log("aaa");
            return "bbb";
        },
        doSomething(){

        }
    },
  }).mount("#app");
</script>
